<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery 键盘事件示例</title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>	
		$(document).ready(function(){		 
			 //触发keydown事件
             $("input:text").keydown(function(){
				 $("span#tip").text("键盘被按下");
			 });
			 
			 //触发keyup事件
			 $("input:text").keyup(function(){
				 $("span#tip").text("键盘被释放");
			 });
			 
			 //触发keypress事件	
			 var count = 0;	
			 $("input:text").keypress(function(){
				 //计数器自增1
				 count++;
				 //更新按键次数
				 $("span#total").text(count);
		     });	 
		});
        </script>   
    </head>
    <body>
        <h3>jQuery 键盘事件示例</h3>
        <hr>
		<p>这是测试文本框：<input type="text" name="demo" /></p>
		<p>按键状态:<span id="tip">没有按键</span></p>
		<p>按键次数:<span id="total">0</span>次</p>
    </body>
</html>